*{
    margin: 0;
    padding: 0;
}
//导航栏
.box{
    width: 753px;
    margin: 0 auto;
    position: relative;
    nav{
        z-index: 99;
        width: 753px;
        height: 85px;
        margin: 0 auto;
        position: fixed;
        .topnav{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            .leftinp{
                height: 55px;
                width: 650px;
                padding: 15px 0 10px 25px;
                position: relative;
                &::after{
                    content: "";
                    position: absolute;
                    top: 30px;
                    left: 40px;
                    width: 28px;
                    height: 28px;
                    background: url(../images/home-common.png) no-repeat -1px -1px;
                }
                input{
                    outline: none;
                    font-size: 30px;
                    width: 647px;
                    height: 56px;
                    border-radius: 50px;
                    text-indent: 2em;
                    border: 1px solid white;
                }
            }
            .rightwo{
                width: 60px;
                margin-right: 10px;
                margin-left: 10px;
                padding-top: 10px;
                padding-left: 10px;
                box-sizing: border-box;
                .rightimg{
                    display: block;
                    width: 60px;
                    height: 40px;
                    background:url(../images/home-common.png) no-repeat -1px -73px;
                }
                .rightwode{
                    color: white;
                    display: block;
                    width: 100%;
                    height: 30px;
                    font-size: 20px;
                }
            }
        }
    }
}

//轮播图
.box{
    overflow: hidden;
    .banner{
        width: 753px;
        height: 450px;
        position: relative;
        .bannerimg{
            width: 100%;
            height: 450px;
            transform: translateX(-753px);
            transition: transform 1s;
            ul{
                list-style: none;
                width: 600%;
                display: flex;
                li{
                    width: 753px;
                    height: 450px;
                }
            }

        }
        
    }
}

//轮播图的点
.box{
    .banner{
        .bannerdian{
            z-index: 100;
            width: 140px;
            height: 20px;
            position: absolute;
            bottom: 100px;
            left: 610px;
            ol{
                width: 100%;
                height: 100%;
                list-style: none;
                display: flex;
                justify-content: space-between;
                li{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    // color: white;
                    background-color: white;
                    &.active{
                        border-radius: 50px;
                        width: 40px;
                    }
                }
            }
        }
    }
}


// 标题
.box{
    .title{
        
        width: 705px;
        height: 130px;
        position: absolute;
        top: 375px;
        left: 50%;
        background-color: white;
        border-radius: 15px;
        box-shadow: 0px 1px 5px black;
        transform: translate(-50%,0);
        padding: 0 30px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .mintitle{
            width: 100px;
            height: 100px;
            .titletext{
                font-size: 20px;
            }
        }
    }
}
.box .title .mintitle .titleimg1 {
    width: 52px;
    height: 60px;
    margin: 5px auto;
    background: url(../images/home-fivemain.png) no-repeat -14px -15px;
}
.box .title .mintitle .titleimg2 {
    width: 65px;
    height: 60px;
    margin: 5px auto;
    background: url(../images/home-fivemain.png) no-repeat -5px -97px;
}
.box .title .mintitle .titleimg3 {
    width: 66px;
	height: 60px;
    margin: 5px auto;
    background: url(../images/home-fivemain.png) no-repeat -7px -170px;
}
.box .title .mintitle .titleimg4 {
    width: 68px;
    height: 60px;
    margin: 5px auto;
    background: url(../images/home-fivemain.png) no-repeat -6px -257px;
}
.box .title .mintitle .titleimg5 {
    width: 66px;
    height: 60px;
    margin: 5px auto;
    background: url(../images/home-fivemain.png) no-repeat -7px -329px;
}

//选项
.box{
    .xunxian{
        width: 700px;
        height: 390px;
        margin:0  auto;
        margin-top: 75px;
        border-radius: 15px;
        display: flex;
        overflow: hidden;
        color: white;
        .xunxian1{
            width: 195px;
            height: 100%;
            .xunxiannei{
                width: 100%;
                height: 130px;
                border: 1px solid white;
                border-left: 0;
                text-align:left;
                line-height: 127px;
                font-size: 30px;
                padding-left: 20px;
                box-sizing: border-box;
                &:nth-child(1){
                    background: url(../images/grid-nav-items-hotel.png) no-repeat ;
                    background-position-y: 100%;
                    background-position-x:45px;
                    background-color: #FA5F56;
                    border-top: 0;
                }
                &:nth-child(2){
                    background: url(../images/grid-nav-items-flight.png) no-repeat ;
                    background-position-y: 100%;
                    background-position-x:35px;
                    background-color: #4B94ED;

                }
                &:nth-child(3){
                    background: url(../images/grid-nav-items-travel.png) no-repeat ;
                    background-position-y: 100%;
                    background-position-x:8px;
                    background-color: #3DC59C;
                    border-bottom: 0;

                }
            }
        }
        .xunxian2{
            width: 168px;
            height: 100%;
            .xunxiannei{
                width: 100%;
                height: 130px;
                border: 1px solid white;
                border-top: 0;
                text-align: center;
                line-height: 130px;
                font-size: 30px;
                &:nth-child(1){
                    background: url(../images/grid-nav-items-minsu.png) no-repeat ;
                    background-color: #FA5F56;
                }
                &:nth-child(2){
                    background: url(../images/grid-nav-items-train.png) no-repeat ;
                    background-color: #4B94ED;
                }
                &:nth-child(3){
                    background: url(../images/grid-nav-items-dingzhi.png) no-repeat ;
                    background-position-y: 100%;
                    background-color: #3DC59C;
                    border-bottom: 0;
                }
            }
        }
        .xunxian3{
            width: 166px;
            height: 100%;
            background-color: darkblue;
            .xunxiannei{
                width: 100%;
                height: 130px;
                border: 1px solid white;
                border-top: 0;
                text-align: center;
                line-height: 128px;
                font-size: 30px;
                &:nth-child(1){
                    background-color: #FA5F56;
                    border-top: 0;
                }
                &:nth-child(2){
                    background-color: #4B94ED;
                }
                &:nth-child(3){
                    background-color: #3DC59C;
                    border-bottom: 0;
                }
            }
        }
        .xunxian4{
            width: 168px;
            height: 100%;
            .xunxiannei{
                width: 100%;
                height: 130px;
                border: 1px solid white;
                border-top: 0;
                border-right: 0;
                text-align: center;
                line-height: 128px;
                font-size: 30px;
                &:nth-child(1){
                    background: url(../images/grid-nav-items-jhj.png) no-repeat ;
                    background-position-y: 100%;
                    background-position-x:35px;
                    background-color: #FA5F56;
                }
                &:nth-child(2){
                    background-color: #4B94ED;
                }
                &:nth-child(3){
                    background-color: #3DC59C;

                }
            }
        }
    }
}

//其他
.box{
    .qita{
        width: 700px;
        height: 200px;
        margin: 24px auto;
        display: flex;
        flex-wrap: wrap;
        .qitanei{
            width: 140px;
            height: 80px;
            text-align: center;

            .qitaimg{
                display: block;
                width: 50px;
                height: 50px;
                margin: 0 auto;
            }
            .qitatext{
                display: block;
                font-size: 23px;
            }
            &:nth-child(1)  .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -7px -6px;
            }
            &:nth-child(2) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -10px -65px;
                
            }
            &:nth-child(3) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -8px -118px;
                
            }
            &:nth-child(4) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -7px -172px;
                
            }
            &:nth-child(5) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -5px -231px;
                
            }
            &:nth-child(6) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -9px -288px;
                
            }
            &:nth-child(7) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -6px -349px;
                
            }
            &:nth-child(8) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -6px -405px;
                
            }
            &:nth-child(9) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -7px -457px;
                
            }
            &:nth-child(10) .qitaimg{
                background: url(../images/un_ico_subnav.png) no-repeat -7px -510px;
                
            }
        }
    }

}

//temai顶部功能
.box{
    .temai{
        width: 100%;
        height: 520px;
        box-sizing: border-box;
        padding: 20px 20px;
        border: 2px solid #ccc;
        border-left: 0;
        border-right: 0;
        .temaitop{
            width: 710px;
            height: 45px;
            display: flex;
            justify-content: space-between;
            .temaitopleft{
                background-image: url(../images/un_home_text.png) ;
                width: 112px;
                height: 30px;
            }
            .temaitopright{
                width: 110px;
                background-image: linear-gradient(to right, purple,rgb(255, 0, 255));
                // color: rgb(255, 0, 255);
                color: white;
                text-align: center;
                line-height: 45px;
                border-radius: 30px;
                font-size: 25px;
            }
        }
    }
}

//temai中间部分 左边
.box{
    .temai{
        .temainei{
            margin-top: 30px;
            width: 710px;
            height: 405px;
            .temaineileft{
                width: 350px;
                height: 100%;
                background-color: #f9f9f9;
                .temaiimg{
                    width: 100%;
                    height: 202px;
                    background: url(../images/pic-tmh-01.jpg) no-repeat;
                }
                .temaitext{
                    width: 100%;
                    height: 175px;
                    box-sizing: border-box;
                    padding: 30px 20px;
                    & span:nth-child(1){
                        display: block;
                        width: 310px;
                        height: 70px;
                        font-size: 27px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    & span:nth-child(2){
                        display: block;
                        margin: 25px 0;
                        width: 100%;
                        height: 30px;
                        font-size: 25px;
                        color: red;
                    }
                }
            }
        }   
    }
}

//temai中间部分 右边
.box{
    .temainei{
        display: flex;
        .temaineiright{
            margin-left: 10px;
            width: 350px;
            height: 405px;
            display: flex;
            flex-wrap: wrap;
            .temaineirighttop{
                background-color: #F9F9F9;
                width: 350px;
                height: 176px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px;
                .texts{
                    display: flex;
                    flex-direction: column;
                    width: 175px;
                    height: 65px;
                    & span:nth-child(1){
                        font-size: 35px;
                        color: red;
                        font-weight: bolder;
                    }
                    & span:nth-child(2){
                        font-size: 25px;
                    }
                }
                .imgs{
                    display: block;
                    width: 100px;
                    height: 100px;
                    background: url(../images/pic-tmh-02.png);
                }
            }
            .temaineirightbotleft{
                width: 170px;
                height: 220px;
                background-color: #F9F9F9;
                display: flex;
                flex-direction: column;
                margin-top: 6px;

                .texts{
                    text-align: center;
                    width: 130px;
                    height: 70px;
                    font-size: 30px;
                    margin: 0 auto;
                    margin-top: 30px;
                    & span:nth-child(1){
                        color: skyblue;
                        font-weight: bolder;
                    }
                }
                .imgs{
                    width: 100px;
                    height: 100px;
                    background-image: url(../images/pic-tmh-03.png);
                    margin: 5px auto;
                }
            }
            .temaineirightbotright{
                width: 170px;
                height: 220px;
                background-color: #F9F9F9;
                margin-left: 10px;
                margin-top: 6px;
                .texts{
                    text-align: center;
                    width: 150px;
                    height: 70px;
                    font-size: 30px;
                    margin: 0 auto;
                    margin-top: 30px;
                    & span:nth-child(1){
                        color: skyblue;
                        font-weight: bolder;
                    }
                }
                .imgs{
                    width: 100px;
                    height: 100px;
                    background-image: url(../images/pic-tmh-04.png);
                    margin: 5px auto;
                }
            }
        }
    }
}

// hosthd 顶部
.box{
    .hosthd{
        margin-top: 20px;
        width: 100%;
        height: 705px;
        border: 2px solid #CCCCCC;
        border-left: 0;
        border-right: 0;
        .hosthdtop{
            width: 100%;
            height: 90px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-top: 25px;
                padding-left: 22px;
                padding-right: 22px;
            .hosthdtopleft{
                width: 350px;
                height:35px;
                display: flex;
                & span:nth-child(1){
                    display: block;
                    width: 155px;
                    height: 35px;
                    background: url(../images/un_home_text.png) no-repeat 0 -39px;
                }
                & span:nth-child(2){
                    display: block;
                    width: 75px;
                    height: 30px;
                    background: url(../images/icon-gg.png) no-repeat ;
                    margin-left: 30px;
                }
            }
            .hosthdtopright{
                width: 205px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                color: white;
                font-weight: bolder;
                border-radius: 20px;
                background-image: linear-gradient(to right, red,blue,green);
            }
        }
    }
}

//housthd 下半部分的顶部
.box{
    .hosthd{
        .hostbot{
        width: 100%;
        height: 620px;
            .hostbottop{
                width: 100%;
                height: 260px;
                display: flex;
                .hostbottopnei{
                    width: 50%;
                    height: 100%;
                    border: 1px solid #ccc;
                }
                .hostbottopnei:nth-child(1){
                    border-left: 0;
                    .hostbottopneitext:nth-child(1){
                        height: 100%;
                        background: url(../images/huodong01.png);
                    }
                }
                .hostbottopnei:nth-child(2){
                    border-right: 0;
                    .hostbottopneitext:nth-child(1){
                        height: 100%;
                        background: url(../images/huodong02.png);
                    }
                }
            }
        }
    }    
}

//housthd 下半部分的中部
.box{
    .hosthd{
        .hostbot{
            .hostbotcent{
                width: 100%;
                height: 160px;
                background: red;
                display: flex;
                .hotbotcentleft{
                    width: 50%;
                    height: 100%;
                    background: url(../images/huodong03.jpg);
                    border: 1px solid #ccc;
                    border-left:0px ;
                }
                .hotbotcentright{
                    width: 50%;
                    height: 100%;
                    background: url(../images/huodong04.jpg);
                    border: 1px solid #ccc;
                    border-right:0px ;
                }
            }
        }
    }
}



//housthd 下半部分的下部
.box{
    .hosthd{
        .hostbot{
            .hostbotbot{
                width: 100%;
                height: 160px;
                display: flex;
                .hostbotbottleft{
                    width: 50%;
                    height: 100%;
                    background: url(../images/huodong05.jpg);
                    border: 1px solid #ccc;
                    border-left: 1px;
                }
                .hostbotbotright{
                    width: 50%;
                    height: 100%;
                    background: url(../images/huodong06.jpg);
                    border: 1px solid #ccc;
                    border-right: 1px;

                }
            }
        }
    }
}

// 电话
.box{
    .dianjhua{
        width: 100%;
        height: 120px;
        border: 1px solid #ccc;
        border-left: 0px;
        border-right: 0px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20px 50px;
        .tubiao{
            width: 145px;
            height: 90px;
            text-align: center;
        }
        .tubiao1{
            & span:nth-child(1){
                display: block;
                font-size: 40px;
            }
            & span:nth-child(2){
                display: block;
                font-size: 20px;
            }
        }
        .tubiao2{
            & span:nth-child(1){
                display: block;
                font-size: 40px;
            }
            & span:nth-child(2){
                display: block;
                font-size: 20px;
            }
        }
        .tubiao3{
            & span:nth-child(1){
                display: block;
                background: url(../images/home-common.png) no-repeat -1px -157px;
                width: 40px;
                height: 40px;
                margin: 5px auto;
            }
            & span:nth-child(2){
                display: block;
                font-size: 20px;
            }
        }
    }

}

// 结尾
.box{
    .boxbtn{
        width: 100%;
        height: 135px;
        box-sizing: border-box;
        padding: 25px 0px;
        font-size: 25px;
        text-align: center;
        .boxbtntop{
            display: block;
            width: 405px;
            margin: 0 auto;
        }
        .boxbtnbtn{
            width: 630px;
            display: block;
            margin: 5px auto;

            color: #999;
        }
    }
}
